<template>
  <div>
    <InfoTable ref="MainTable" location="versions" :filterFields="filterFields">
      <template slot="table-operation" slot-scope="row">
        <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="info($refs.MainTable,row)">详细信息</b-btn>
        <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="amendManagerModalShow($refs.MainTable,row)">管理</b-btn>
        <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="remove($refs.MainTable,row)">删除</b-btn>
      </template>
    </InfoTable>
    <!-- Modal Component -->
    <b-modal ref="AmendManagerModal" id="amendManagerModal" centered title="优化表" size="lg">
      <InfoTable v-if="modal.model.show==true" ref="AmendTable" location="amends/search/version" :param="modal.param" :fixed="false" :filterFields="filterFields">
        <template slot="button-operation">
          <b-button size="sm" variant="outline-primary" style="margin-right:6px" @click="amendAssociateManagerModalShow($refs.AmendTable,modal.currentRecord)">
            新建关联
          </b-button>
          <b-button size="sm" variant="outline-primary" style="margin-right:6px" @click="batchRemoveAssociate($refs.AmendTable)">
            批删除关联
          </b-button>
        </template>
        <template slot="table-status" slot-scope="row">
          {{row.data.item.status | status}}
        </template>
        <template slot="table-operation" slot-scope="row">
          <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="info($refs.AmendInfoModal,row)">信息</b-btn>
          <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="removeAssociate($refs.AmendTable,row)">删除关联</b-btn>
        </template>
      </InfoTable>
    </b-modal>
    <!-- Associate Modal Component -->
    <b-modal ref="AmendAssociateManagerModal" id="amendManagerModal" centered title="关联表" size="lg">
      <InfoTable v-if="modal.model.show==true" ref="AmendAssociateTable" location="amends/search/notVersion" :param="modal.param" :fixed="false" :filterFields="filterFields">
        <template slot="button-operation">
          <b-button size="sm" variant="outline-primary" style="margin-right:6px" @click="batchAddAssociate($refs.AmendTable)">
            批添加关联
          </b-button>
        </template>
        <template slot="table-status" slot-scope="row">
          {{row.data.item.status | status}}
        </template>
        <template slot="table-operation" slot-scope="row">
          <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="addAssociate($refs.AmendAssociateTable,row)">添加关联</b-btn>
        </template>
      </InfoTable>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-right" variant="primary" @click="$refs.AmendAssociateManagerModal.hide(),$refs.AmendManagerModal.show()">
          返回
        </b-btn>
      </div>
    </b-modal>
  </div>
</template>
<script>
import InfoTable from "components/InfoTable.vue";
import InfoModal from "components/InfoModal.vue";
export default {
  name: "Manager",
  components: {
    InfoTable,
    InfoModal
  },
  data() {
    return {
      filterFields: ["status"],
      modal: {
        location: "amends/search/version",
        param: "versionId=1",
        currentRecord: {},
        alterRecord: {},
        status: "create",
        edit: false,
        property: [],
        hasData: false,
        title: "",
        content: "",
        data: [
          {
            label: "",
            description: "",
            type: "",
            key: "",
            name: "",
            value: ""
          }
        ],
        model: {
          show: false
        }
      }
    };
  },
  filters: {
    status: function(value) {
      switch (value) {
        case 0:
          return "问题还未提交";
          break;
        case 1:
          return "优化已经提交";
          break;
        case 2:
          return "问题正在解决";
          break;
        case 3:
          return "优化还在分析";
          break;
        case 4:
          return "优化成功";
          break;
        case 5:
          return "优化失败";
          break;
      }
    }
  },
  methods: {
    addAssociate(o, row) {
      console.log(this.modal.currentRecord);
      o.addAssociate(
        this.getSelfHref(this.modal.currentRecord.data.item),
        this.getHref(row.data.item, "version")
      );
    },
    batchAddAssociate(o) {
      console.log(this.modal.currentRecord);
      o.batchAddAssociate(
        this.getSelfHref(this.modal.currentRecord.data.item),
        "version"
      );
    },
    removeAssociate(o, row) {
      console.log(this.modal.currentRecord);
      o.removeAssociate(
        this.getSelfHref(this.modal.currentRecord.data.item),
        this.getHref(row.data.item, "version")
      );
    },
    batchRemoveAssociate(o) {
      console.log(this.modal.currentRecord);
      o.batchRemoveAssociate(
        this.getSelfHref(this.modal.currentRecord.data.item),
        "version"
      );
    },
    info(o, row) {
      console.log(row);
      o.info(row.data);
    },
    remove(o, row) {
      o.remove(row.data);
    },
    getSelfHref(Record) {
      return Record._links.self.href;
    },
    getHref(Record, name) {
      return Record._links[name].href;
    },
    amendManagerModalShow(o, row) {
      this.modal.currentRecord = row;
      console.log(this.$refs);
      // 获取记录的主键
      let key = parseInt(o.getKey(row.data.item._links.self.href));
      console.log(key);
      // 配置参数
      this.modal.model.show = true;
      this.modal.param = "versionId=" + key;
      // 打开管理器
      this.$refs.AmendManagerModal.show();
    },
    amendAssociateManagerModalShow(o, row) {
      console.log(this.$refs);
      // 获取记录的主键
      let key = parseInt(o.getKey(row.data.item._links.self.href));
      console.log(key);
      // 配置参数
      this.modal.model.show = true;
      this.modal.location = "amends/search/notVersion";
      this.modal.param = "versionId=" + key;
      // 打开管理器
      this.$refs.AmendAssociateManagerModal.show();
    },
    amendAssociateManagerModalShowOnly() {
      this.$refs.AmendAssociateManagerModal.show();
    }
  }
};
</script>
<style lang="scss">
.table th,
.table td {
  vertical-align: middle;
}
.custom-select {
  float: left;
}
</style>
